<template>
  
  <div class="recommend">
      <!-- 热门推荐 头部 -->
      <div class="v_hd2" v-if="items.length">
      <router-link to="/home/discover/playlist" class="Hot">热门推荐</router-link>
      <div class="tab">
        <div v-for="(item, index) in items" :key="index">
          <router-link
            :to="{ path: '/home/discover/playlist', query: { cat: item.name } }"
            class="item"
            >{{ item.name }}</router-link
          >
          <span>|</span>
        </div>
      </div>
      <span class="more">
        <router-link to="/home/playlist/" class="s-fc3">更多</router-link>
        <i class="cor">&nbsp;</i>
      </span>
      </div>
      <ul class="hot_lists">
        <li class="list" v-for="(item, index) in recommendData" :key="index">
         <div class="upper">
          <a href="javascript:;" @click.prevent="a(item.id)">
            <img :src="item.picUrl" :alt="item.copywriter" />
          </a>
          <div class="upper_div">
            <span class="icon"></span>
            <span class="nb">{{ item.playCount }}</span>
            <a href="javascript:;" class="icon-play" @click="play(item.id)"></a>
          </div>
        </div>
        <p class="down_div">
          <a href="#" @click.prevent="a(index)">
            {{ item.name }}
          </a>
        </p>
      </li>
      </ul>
  </div>
</template>

<script>
import { playlist_hot } from "../../../network/discover";
import { personalized } from "../../../network/discover";
export default {
  data() {
    return {
      items: [], //标题数据 如：华语/流行/摇滚/....
      recommendData: "", //歌单数据
    };
  },
  methods: {
    play(id) {
      //点击歌单播放按钮 发送歌单id
       this.$store.dispatch("song_ct",id)
    },
    a(id) {
      this.$router.push({path:'/home/playlist' ,query:{id:id}});
    },
  },
  watch:{                   //用来监听登录 登陆成功后的操作
    '$store.state.userId' : function(){
      personalized(8).then((res) => {
         this.recommendData = res.data.result;
      });
    }
  },
  created() {
    personalized(8).then((res) => {
      this.recommendData = res.data.result;
    });
    playlist_hot().then((res) => {
      this.items = res.data.tags.splice(0, 5);
    });
  },
};
</script>
<style  scoped>
.recommend {
  display: block;
}
.v_hd2 {
  height: 33px;
  padding: 0 10px 0 34px;
  border-bottom: 2px solid #c10d0c;
  background: url("../../../assets/imgs/index.png") no-repeat;
  background-position: -225px -156px;
}
.Hot {
  display: block;
  line-height: 28px;
  font-weight: normal;
  font-size: 20px;
  float: left;
}
.tab {
  float: left;
  margin: 7px 0 0 20px;
}
.tab div {
  display: inline-block;
  margin-right: 10px;
}
.tab span {
  color: #666;
  font-size: 12px;
}
.item {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  color: #666;
}
.more {
  float: right;
  margin-top: 9px;
}
.more a {
  color: #666;
  font-size: 12px;
}
.cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background: url("../../../assets/imgs/index.png") no-repeat;
  background-position: 0 -240px;
}

.hot_lists {
  margin: 20px 0px 0px -42px;
  height: 420px;
}
.list {
  width: 140px;
  height: 204px;
  padding-left: 42px;
  display: inline-block;
  float: left;
  overflow: hidden;
  line-height: 1.4;
}
.upper {
  width: 140px;
  height: 140px;
  position: relative;
}
.upper a {
  display: block;
  width: 100%;
  height: 100%;
}
.upper img {
  width: 100%;
  height: 100%;
}
.upper_div {
  width: 100%;
  height: 27px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url("../../../assets//imgs/coverall.png");
  background-position: 0 -537px;
}
.icon {
  float: left;
  display: inline-block;
  width: 14px;
  height: 11px;
  background-image: url("../../../assets/imgs/iconall.png");
  background-position: 0 -24px;
  margin: 9px 5px 9px 10px;
}
.nb {
  color: #ccc;
  margin: 8px 0 0 0;
  font-size: 12px;
  float: left;
}
.upper_div .icon-play {
  width: 16px;
  height: 17px;
  display: block;
  background-image: url("../../../assets/imgs/iconall.png");
  background-position: 0px 0px;
  float: right;
  margin: 5px 8px 0px 0px;
}
.icon-play:hover {
  background-position: 0px -60px;
}

.down_div {
  width: 100%;
  height: 40px;
  margin: 8px 0px 3px;
}
.down_div a {
  color: #000000;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.down_div:hover {
  text-decoration: underline;
}
</style>